import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import {MainTitle} from "@/api/Objects/WebStaticContent.ts";
import WebStaticContentApi from "@/api/WebStaticContentApi.ts";
import {Button} from "antd";
import UserAvatar from "@/pages/MainPage/UserAvatar.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        title: css`
            width: 100%;
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            display: flex;
            position: relative;
            overflow: hidden;

            p {
                position: relative;
                z-index: 2;
            }

            .divider {
                width: 3px;
                font-size: 50px;
                line-height: 100px;
                background-color: #000;
                position: relative;
                z-index: -1;
                transition: all .5s ease-in-out;
                box-shadow: 0 0 5px ${token.colorPrimary};
            }

            .title {
                color: #ffffff;
                transition: all .5s ease-in-out;
                margin: 0 50px;
            }

            .subTitle {
                margin: 0 50px;
            }

            :hover {
                .title {
                    color: ${token.colorPrimary};
                    transition: all 1s ease-in-out;
                    transform: scale(1.2);
                }

                .divider {
                    transform: scaleX(1000);
                    box-shadow: 0 0 0 #000;
                }
            }
            
            .controls {
                margin-left: auto;
            }
        `,
    }
})

const MainHeader: React.FC = () => {
    const styles = useStyles().styles;
    const [title, setTitle] = useState<MainTitle>({title: "WEB 360", subTitle: "1234"})

    useEffect(() => {
        WebStaticContentApi.getTitles().then((data) => {
            setTitle(data)
        })
    }, []);

    return (
        <div className={styles.title}>
            <p className="title">{title.title}</p>
            <p className="divider"></p>
            <p className="subTitle">{title.subTitle}</p>
            <div className="controls">
                <UserAvatar/>
            </div>
        </div>
    )
}

export default MainHeader